{% extends "base/_base.html" %}
{% load bootstrap3 %}
{% load staticfiles %}

{% block  title %}容器管理{% endblock %}

{% block left %}
    {% include "base/_left.html" with cmdb_docker_container_active="active" %}
{% endblock left %}


{% block page-content %}


    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-10">
            <h2>资产管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="/">主页</a>
                </li>
                <li>
                    <a href="{% url 'dock:docker_host_list' %}">Docker管理</a>
                </li>
                <li>
                    <a href="{% url 'dock:docker_container' client.dockerhost.id %}">容器管理 - {{ client.dockerhost }}</a>
                </li>
                <li class="active">
                    <strong>新建容器</strong>
                </li>
            </ol>
        </div>
        <div class="col-lg-2">

        </div>
    </div>


    <div class="row wrapper wrapper-content animated fadeInRight">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>创建容器</h5>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal" class="form-horizontal" action=""
                        method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% if form.errors %}
                            <div class="alert alert-danger" style="margin: 20px auto 0px">
                                {{ form.errors }}
                            </div>
                        {% endif %}

                        <!-- <div class="form-group">
                            <label class="col-md-2 control-label" for="id_host">宿主机</label>
                            <div class="col-md-9">
                                <span class="form-control">{{ client.dockerhost }}</span>
                            </div>
                        </div> -->

                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">容器名称</label>
                            <div class="col-md-9">
                                <input type="text" name="name" value="{{ form.data.name }}" required="" maxlength="100" placeholder="容器名称" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">使用镜像</label>
                            <div class="col-md-9">
                                <select name="image" required="" class="form-control">
                                    {% for row in imgs %}
                                    <option value="{{ row.name }}" {% if row.name == form.data.image %}selected{% endif %}>{{ row.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">使用网络</label>
                            <div class="col-md-9">
                                <select name="network" required="" class="form-control">
                                    {% for row in nets %}
                                    <option value="{{ row.name }}" {% if row.name == form.data.network %}selected{% endif %}>{{ row.type }} -- {{ row.name }} ({{ row.subnet }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">容器IP</label>
                            <div class="col-md-9">
                                <input type="text" name="ip" value="{{ form.data.ip }}" maxlength="100" placeholder="未填写时，将自动根据所选网络进行分配" class="form-control">
                                <div class="help-block">若未填IP，可能导致系统自动设置的IP与其它跨宿主机的容器IP冲突！</div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">映射端口</label>
                            <div class="col-md-9">
                                <input type="text" name="ports" value="{{ form.data.ports }}" maxlength="300" placeholder="22, 80:80, 127.0.0.1:3306:3306" class="form-control">
                                <div class="help-block">监听地址:宿主机端口:容器端口，多个映射使用逗号间隔<br/>
                                监听地址省略时则为0.0.0.0，监听端口省略时则和容器端口一致</div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">挂载目录</label>
                            <div class="col-md-9">
                                <input type="text" name="volumes" value="{{ form.data.volumes }}" maxlength="300" placeholder="/var/www:/mnt/vol1:ro, /home/app/:/mnt/vol2" class="form-control">
                                <div class="help-block">比如只读> 宿目录:容器路径:ro，多个挂载使用逗号间隔</div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">启动命令</label>
                            <div class="col-md-9">
                                <input type="text" name="command" value="{{ form.data.command }}" placeholder="自定义运行命令" class="form-control">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label" for="id_state">&nbsp;</label>
                            <div class="col-md-9">
                                <div class="checkbox">
                                    <label><input type="checkbox" name="start" checked id="id_start">创建后启动容器</label>
                                    <br/>(通常情况下默认容器命令都是阻塞式保持着容器运行，某些容器镜像非阻塞式命令执行后容器会退出，比如busybox，除非加上-it参数或使用top、tail -f等阻塞式命令)
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="id_state">&nbsp;</label>
                            <div class="col-md-9">
                                <div class="checkbox">
                                    <label><input type="checkbox" name="tty" id="id_tty">伪终端</label>
                                    (相当于docker run 添加-t参数，使输出信息带终端版面信息)
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label" for="id_state">&nbsp;</label>
                            <div class="col-md-9">
                                <div class="checkbox">
                                    <label><input type="checkbox" name="stdin" id="id_stdin">输入交互</label>
                                    (相当于docker run 添加-i参数，使之后docker attach进容器后可进行按键交互)
                                </div>

                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">

                                <button class="btn btn-primary" type="submit">提交</button>
                                <button class="btn btn-white" type="reset">重置</button>
                            </div>
                        </div>

                    </form>


                </div>
            </div>
        </div>


    </div>

{% endblock %}


{% block footer-js %}
    <script>
        function conn_docker(url, textarea_height){
            $.ajax({
                url: url,
                type: 'GET',
                timeout: 20000,
                error: function(){
                    $("#server_msg").html('<option value="">网站连接失败！请联系CMDB管理员</option>');
                },
                success: function(msg_html){
                    // json格式化
                    // console.log(msg_html);
                    try{
                        var msg_html = JSON.stringify(JSON.parse(msg_html), null, 4);
                    }catch(err){}finally{
                        $('#server_msg').val(msg_html);
                        // console.log(txt);
                        $('#server_msg')[0].style.minHeight= textarea_height;
                    } 
                }
            });
        };

        $(document).ready(function(){

            {% if client %}

            // $( ".btn-danger.btn-xs" ).click()
            $('#tb').on('click', 'button', function (e) {
                console.log($(this));
                var url="{% url 'dock:docker_container_do' client.dockerhost.id %}?id="+this.parentElement.parentElement.children[0].children[0].value;
                var textarea_height="400px";
                if (this.className=="btn btn-danger btn-xs") {
                    if(! window.confirm('确认删除容器？')){
                        return false;
                    }
                    var url="{% url 'dock:docker_container_rm' client.dockerhost.id %}?id="+this.parentElement.parentElement.children[0].children[0].value;
                    textarea_height="100px";
                } else if (this.className=="btn btn-primary btn-xs") {
                    url=url+"&info=attrs";
                } else if (this.className=="btn btn-success btn-xs") {
                    url=url+"&info=logs";
                } else if (this.className=="btn btn-info btn-xs") {
                    url=url+"&info=start";
                    textarea_height="100px";
                } else if (this.className=="btn btn-warning btn-xs") {
                    url=url+"&info=stop";
                    textarea_height="100px";
                }

                $("#server_div").show();
                $("#server").text(this.parentElement.parentElement.children[1].textContent+" "+this.textContent);
                conn_docker(url, textarea_height);

            });


            $("#delall").click(function(){
                var container_ids = '';
                var cs=document.getElementsByName('id');
                for (i=0; i < cs.length; i++) {
                    if (cs[i].checked) {
                        container_ids = container_ids+cs[i].value+',';
                        // console.log(cs[i].value);
                    }
                }
                if (! container_ids) {return false;}
                if(! window.confirm('确认批量删除容器？')){
                    return false;
                }
                var url="{% url 'dock:docker_container_rm' client.dockerhost.id %}?id="+container_ids;
                console.log(container_ids);
                $("#server_div").show();
                $("#server").text("批量删除容器");
                conn_docker(url, "100px");
            });
            {% endif %}

        });


    </script>
{% endblock footer-js %}


